/** @odoo-module **/
const {
    markup,
    Component,
    onWillStart,
    useEnv,
    useSubEnv,
    useChildSubEnv,
    useRef,
    useState,
    mount,
    xml,
    whenReady,
    onMounted,
    onError,
    loadFile,
    onWillUpdateProps,
    useEffect,
    useComponent
} = owl;

class VideoModal extends Component {
    static template = xml  `
    <div class="modal fade" id="VideoModal">
          <div class="modal-dialog modal-dialog-centered  modal-xl">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5">帮助</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
                <div class="modal-body">
                    <iframe t-att-src="state.src" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%;height: 622px"></iframe>
              </div>
<!--                <div class="modal-footer">-->
<!--                    &lt;!&ndash;data-bs-dismiss="modal"&ndash;&gt;-->
<!--                    <button type="button" class="btn btn-secondary" t-on-click.stop="handleOnCancel">-->
<!--                        取消-->
<!--                    </button>-->
<!--              </div>-->
            </div>
          </div>
      </div>`;
    static props = {
        is_open: {type: Boolean},
        data: {type: Object}
    };

    setup() {
        this.state = useState({
            src:''//   //player.bilibili.com/player.html?isOutside=true&aid=1152514575&bvid=BV1mZ421q73h&cid=1489652530&p=1
        });
        onMounted(() => {
            let _this = this;
            this.Modal = new bootstrap.Modal('#VideoModal', {});

            document.getElementById('VideoModal').addEventListener('hidden.bs.modal', event => {
                _this.env.closeVideoModal();
            })
        })

        onWillUpdateProps(nextProps => {
            // console.log(nextProps);
            if (nextProps.is_open) {
                return this.open(nextProps.data);
            }
        });

        this.handleOnConfirm = _.debounce(this.onConfirm,300);
        this.handleOnCancel = _.debounce(this.onCancel,300);
    }

    open(data) {
        this.state.src = data.src;
        this.Modal.show();
    }

    onConfirm() {
        if (typeof (this.props.data.onConfirm) == 'function') {
            this.props.data.onConfirm();
        }
        this.Modal.hide();
    }

    onCancel(){
        if (typeof (this.props.data.onCancel) == 'function') {
            this.props.data.onCancel();
        }
        this.Modal.hide();
    }
}
export {
    VideoModal
}

